import React, { Component } from "react";

// antd
import { Form, Input, Button, Row, Col, message } from "antd";
import { UserOutlined, LockOutlined, LinkOutlined } from "@ant-design/icons";

// 验证
import { num6 } from '../../utils/validate';

// 加密
import CryptoJs from 'crypto-js';

// 组件
import Code from '../../components/Code';

// API
import { Register } from "../../api/account";

class registerForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username:'',
      password:'',
      code:'',
      module: 'register',
      loading: false
    };
  }

  onFinish = (values) => {
    const { 
      username, 
      password, 
      code
    } = this.state;
    
    this.setState({
      loading: true
    });
    Register({
      username,
      password: CryptoJs.MD5(password).toString(),
      code
    }).then(res => {
      this.setState({
        loading: false
      });
      const data = res.data;
      message.success(data.message)
      if(data.resCode === 0) {
        this.props.toggleForm();
      }
    });
    console.log("Received values of form: ", values);
  };

  // 数据绑定 begin
  
  // 用户名变更
  inputChangeUsername = (e) => {
    this.setState({
      username: e.target.value
    });
  }
  
  // 密码变更
  inputChangePassword = (e) => {
    this.setState({
      password: e.target.value
    });
  }
  
  // 验证码变更
  inputChangeCode= (e) => {
    this.setState({
      code: e.target.value
    });
  }
  // 数据绑定 end
  
  render() {
    const { 
      username, 
      password, 
      code, 
      module,
      loading
    } = this.state;

    return (
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={this.onFinish}
      >
        <Form.Item
          name="username"
          rules={[
            { required: true, message: "邮箱不能为空" },
            { type: "email", message: "邮箱格式不正确"}
          ]}
        >
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="用户名"
            value={ username }
            onChange={ this.inputChangeUsername }
          />
        </Form.Item>

        <Form.Item
          name="password"
          rules={[
            { required: true, message: "密码不能为空" },
            ({ getFieldValue }) => ({
                validator(role, value){
                    let repassword = getFieldValue("repassword"); // 获取再次输入密码的值 
                    if(!new RegExp(num6).test(value)){
                        return Promise.reject("密码为6位数字")
                    }
                    if(repassword && value !== repassword) {
                        return Promise.reject("两次密码不一致")
                    }
                    return Promise.resolve();
                }   
            })
          ]}
        >
          <Input.Password
            prefix={<LockOutlined className="site-form-item-icon" />}
            placeholder="密码"
            value={ password }
            onChange={ this.inputChangePassword }
          />
        </Form.Item>

        <Form.Item
          name="repassword"
          rules={[
            { required: true, message: "确认密码不能为空" },
            ({ getFieldValue }) => ({
                validator(role, value){
                    if(value !== getFieldValue("password")){
                        return Promise.reject("两次密码不一致")
                    }
                    return Promise.resolve();
                }   
            })
          ]}
        >
          <Input.Password
            prefix={<LockOutlined className="site-form-item-icon" />}
            placeholder="确认密码"
          />
        </Form.Item>

        <Form.Item
          name="code"
          rules={[
            { required: true, message: "验证码不能为空" },
            { len: 6, message: '长度为6位的验证码' }
          ]}
        >
          <Row gutter={13}>
            <Col span={15}>
              <Input
                prefix={<LinkOutlined className="site-form-item-icon" />}
                placeholder="验证码"
                value={ code } 
                onChange={ this.inputChangeCode }
              />
            </Col>
            <Col span={9}>
              <Code username={ username } module={ module }  ></Code>
            </Col>
          </Row>
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
            block
            loading={ loading }
          >
            注册
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

export default registerForm;
